<!-- 应急资源列表 -->
<template>
  <CustomTableVue :field-list="useFields().spongProjectProgressiield" :table-data="tableData" :slotMinWidth="'100px'" >
     <template #jump="slotProps">
   <div class="text-center" style="font-family:' DIN-Bold';color: rgba(0, 194, 255, 1);" @click="useFunc().flyById(slotProps.row.id)">
        定位查看  
 </div>
 </template>
 <template #status="slotProps">
 <div class="status-box">
    <span :class="['status-indicator', statusClass(slotProps.row.status)]"></span>
  <span :class="textColorClass(slotProps.row.status)">{{ slotProps.row.status}}</span>
</div>
 </template>
</CustomTableVue>
</template>

<script setup lang='ts'>
import  CustomTableVue from '@/components/common/table/CustomTable.vue';
import { useFields } from "@/hook/useFields";
import { useFunc } from "@/hook/useFunc";
import { projectFunc } from "@/hook/projectFunc";

const tableData=useFields().fakeDataSoong.filter((item:any)=>item.type==='项目').map((item:any)=>item.special_attributes)
// const tableData = ref([
// {
//     name:projectFunc().randomProjectName(),
//     type:"市政项目",
//    status:0,

// },
// {
//   name:projectFunc().randomProjectName(),

//    status:1,
//    type:"市政项目",

// },
// {
//   name:projectFunc().randomProjectName(),

//    status:2,
//    type:"市政项目",

// },
// {
//   name:projectFunc().randomProjectName(),

//    status:3,
//    type:"市政项目",

// },
// {
//   name:projectFunc().randomProjectName(),

//    status:4,
//    type:"市政项目",

// },
// {
//   name:projectFunc().randomProjectName(),

//    status:2,
//    type:"市政项目",

// },
// {
//   name:projectFunc().randomProjectName(),

//    status:3,
//    type:"市政项目",

// },
// {
//   name:projectFunc().randomProjectName(),

//    status:4,
//    type:"市政项目",

// },
// {
//   name:projectFunc().randomProjectName(),

//    status:2,
//    type:"市政项目",

// },
// {
//   name:projectFunc().randomProjectName(),

//    status:3,
//    type:"市政项目",

// },
// {
//   name:projectFunc().randomProjectName(),

//    status:4,
//    type:"市政项目",

// },
// {
//   name:projectFunc().randomProjectName(),

//     type:"市政项目",
//    status:0,

// },
// {
//   name:projectFunc().randomProjectName(),

//    status:1,
//    type:"市政项目",

// },
// {
//   name:projectFunc().randomProjectName(),

//    status:2,
//    type:"市政项目",

// },

// ]);
interface SlotProps {
row: {
  status: number;
};
}
const jumpto=(row:any)=>{
  console.log(row)
}
const slotProps = ref<SlotProps>({
row: {
  status: 0, // 默认值或者初始值
}
});

const statusText = (status: number) => {

switch(status) {
  case 0: return '未开始';
  case 1: return '进行中';
  case 2: return '已完成';
  case 3: return '已延期';
  case 4: return '提前完成';
  default: return '';
}
};

const statusClass = (status: string) => {
switch(status) {
  case '未开始': return 'yellow';
  case '进行中': return 'blue';
  case '已完成': return 'orange';
  case '已延期': return 'red1';
  case '提前完成': return 'purple';

  default: return '';
}
};

const textColorClass = (status: number) => {
switch(status) {
  // case 0: return 'white-text';
  case 3: return 'red-text';
  // case 2: return 'orange-text';
  default: return '';
}
};
</script>

<style scoped lang="less">
.status-box {
font-family: 'DIN-Bold';
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}

.status-indicator {
height: 10px;
width: 10px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}

.yellow {
background-color: yellow;
}

.red1 {
background-color: red;
}

.orange {
background-color: orange;
}
.blue {
background-color: rgb(96, 223, 184);
}
.purple {
background-color: rgb(96, 109, 223);
}

.white-text {
color:#E6FDFF 80%
}

.red-text {
color: red;
}

.orange-text {
color: orange;
}
</style>